
/*最近新书变换样式*/
#new .effect-1 {
    position: relative;
    overflow: hidden;
    border: 1px solid hsl(0, 0%, 80%);
    perspective: 800px;
    /*设置元素被查看位置的视图*/
}

#new .effect-1:hover .image-box {
    transform: rotateX(75deg);
    /*通过 rotatex() 方法，元素围绕其 X 轴以给定的度数进行旋转。*/

    transition: 1s;
    transform-origin: center bottom;
}

/*文本说明*/
#new .text-desc {
    position: absolute;
    left: 0;
    top: 0;
    margin-bottom: 25px;
    padding: 10px;
    opacity: 0;
    z-index: -1;
    /*就是东西叠起来，他在纸面是-1的位置*/
}

#new .effect-1:hover .text-desc {
    opacity: 1;
    transition: 2s;
}

/*最近促销变换样式*/
#sales .text-desc {
    position: absolute;
    left: 0;
    top: 0;
    margin-bottom: 25px;
    padding: 10px;
    opacity: 0;
    z-index: -1;
}

#sales .effect-1 {
    position: relative;
    overflow: hidden;
    border: 1px solid hsl(0, 0%, 80%);
    perspective: 800px;
    /*设置元素被查看位置的视图*/
}

#sales .effect-1:hover .image-box {
    transform: rotateY(180deg);
    transition: 1s;
    opacity: 0.2;
}

#sales .effect-1:hover .text-desc {
    opacity: 1;
    transition: 2s;
}


/*最近新书标题图标*/
.icon-new:before {
    content: "\f044";
}

/*最近促销标题图标*/
.icon-sale:before {
    content: "\f295";
}
